<template>
  <!-- 写评论页面 -->
  <view class="main">
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/aliang/navigation.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_">发布评论</view>
      <view class="right_"></view>
    </view>
    <view class="textarea">
      <textarea v-model="text" placeholder="写评论" />
    </view>

    <view class="imgs">
      <view class="img" v-for="(item, index) in fileUrl" :key="index">
        <image
          :src="item"
          mode="aspectFill"
          class="image"
          @tap="imgsDa(index)"
        ></image>
        <image
          src="../../imges/shanchu1.png"
          mode="aspectFill"
          class="shan"
          @tap="imgsShan(index)"
        ></image>
      </view>
      <view class="push_img" v-if="fileUrl.length < 3" @tap="selctPhone"
        >+</view
      >
    </view>
    <view class="btn" @tap="xiepinlun">发布</view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      imgs: [], //照片数组
      id: "",
      text: "",
      upToken: "",
      qiniuyun: "",
      qiniuUrl: "",
      fileUrl: [],
      isPush: true,
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.request({
      url: "h5/home/uploadApplication",
      method: "post",
      header: {
        "content-type": "application/json;charset=UTF-8",
        "api-client": "72e0fee8172411ea995200163e05ff66",
        "api-version": this.globalData.apiVersion,
        "Source-Type": 7,
        // 'token': token
      },
      data: {},
    }).then((res) => {
      // console.log(res)
      this.upToken = res.data.data.upToken;
      this.qiniuyun = res.data.data.qiniuDomain;
      this.qiniuUrl = res.data.data.region;
    });
  },
  methods: {
    fanLastPage() {
      //返回上一页
      window.history.go(-1);
    },
    xiepinlun() {
      if (!this.isPush) {
        return false;
      }
      let token = uni.getStorageSync("token");
      let that = this;
      // console.log(token, 'token')
      if (
        (this.text == "" && this.fileUrl.length == 0) ||
        (this.text.trim().length == 0 && this.fileUrl.length == 0)
      ) {
        uni.showToast({
          title: "请输入内容",
          duration: 2000,
          icon: "none",
        });
        return false;
      }

      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/orgMessage/saveComment?uid=63755c41127811e981b5fa163e4d6bc3",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            messageId: this.id,
            content: this.text,
            pictureList: this.fileUrl,
          },
        }).then((res) => {
          // console.log(res.data.code);
          if (res.data.code == 200) {
            this.isPush = false;
            uni.showToast({
              title: "发布成功",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    selctPhone(e) {
      uni.chooseImage({
        count: 3,
        success: (res) => {
          console.log(res);
          let tempFilePaths = res.tempFilePaths;
          if (this.imgs.length == 0) {
            this.imgs = res.tempFilePaths;
          } else {
            this.imgs = [...this.imgs, ...res.tempFilePaths];
          }
          if (this.imgs.length > 3) {
            this.imgs.length = 3;
            uni.showToast({
              title: "最多上传三张图片",
              duration: 2000,
              icon: "none",
            });
          }
          // console.log(res.tempFilePaths)
          uni.showLoading({
            title: "上传中",
          });
          if (this.fileUrl.length == 0) {
            tempFilePaths.length = 3;
          } else if (this.fileUrl.length == 1) {
            tempFilePaths.length = 2;
          } else if (this.fileUrl.length == 2) {
            tempFilePaths.length = 1;
          } else {
            return false;
          }
          tempFilePaths.forEach((v, i) => {
            uni.uploadFile({
              url: "https://up-z0.qiniup.com",
              filePath: tempFilePaths[i],
              name: "file",
              formData: {
                token: this.upToken,
              },
              success: (uploadFileRes) => {
                let imgList = [];
                imgList.push(
                  this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key
                );
                if (this.fileUrl.length == 0) {
                  this.fileUrl = imgList;
                } else {
                  this.fileUrl = [...imgList, ...this.fileUrl];
                }
                if (this.fileUrl.length > 3) {
                  this.fileUrl.length = 3;
                }
                // console.log( this.fileUrl)
                // if(tempFilePaths.length == i+1){
                // 	  uni.hideLoading();
                // 	uni.showToast({
                // 		title: "上传成功",
                // 		duration: 1200,
                // 		icon: 'none'
                // 	});
                // }
                uni.hideLoading();
                uni.showToast({
                  title: "上传成功",
                  duration: 1200,
                  icon: "none",
                });
              },
            });
          });
        },
      });
    },
    imgsDa(index) {
      //点击放大
      uni.previewImage({
        urls: this.fileUrl,
        current: index,
        loop: true,
      });
    },
    imgsShan(index) {
      //点击删除
      uni.showModal({
        title: "提示",
        content: "确定删除此张照片吗？",
        success: (res) => {
          if (res.confirm) {
            this.imgs.splice(index, 1);
            this.fileUrl.splice(index, 1);
            uni.showToast({
              title: "删除成功",
              duration: 1200,
              icon: "none",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.uni-toast {
  top: 20% !important;
}
.main {
  padding: 40rpx 32rpx;
  padding-top: 132rpx;
  .top_tou {
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    line-height: 92rpx;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    .left_ {
      height: 28rpx;
      width: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      width: 18rpx;
    }
  }

  .textarea {
    width: 100%;
    height: 220rpx;
    textarea {
      width: 100%;
      height: 100%;
    }
  }
  .imgs {
    display: flex;
    flex-wrap: wrap;
    .img {
      width: 200rpx;
      height: 200rpx;
      border-radius: 12rpx;
      margin-right: 18rpx;
      margin-bottom: 15rpx;
      position: relative;
      .image {
        width: 100%;
        height: 100%;
      }
      .shan {
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        top: -10rpx;
        right: -10rpx;
      }
    }
    .push_img {
      width: 200rpx;
      height: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 100rpx;
      box-sizing: border-box;
      border: 2rpx solid #ccc;
      border-radius: 5rpx;
    }
  }
  .btn {
    margin: 0 auto;
    margin-top: 55rpx;
    width: 620rpx;
    height: 74rpx;
    background: #2168eb;
    border-radius: 37rpx;
    text-align: center;
    line-height: 74rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
